
<template>
    <div class="login">
      <div class="box">
        <h2>智慧医疗</h2>
        <h2>请扫描二维码</h2>
      </div>
    </div>
  </template>
  
  <script>
 export default {
  name: "Login",

  data() {
    return {
      barcodeData: '', // 存储扫码枪输入的数据
      isScanning: false, // 标记是否正在扫描
    };
  },

  mounted() {
    this.startListeningForKeyboardEvents();
  },

  beforeUnmount() {
    this.stopListeningForKeyboardEvents();
  },

  methods: {
    startListeningForKeyboardEvents() {
      window.addEventListener('keydown', this.handleKeyDown);
    },

    stopListeningForKeyboardEvents() {
      window.removeEventListener('keydown', this.handleKeyDown);
    },

    handleKeyDown(event) {
      // 如果是 Enter 键，结束扫描；否则开始或继续扫描
      if (event.key === 'Enter') {
        if (this.isScanning) {
          this.finishScanning();
        }
      } else {
        this.isScanning = true;
        this.barcodeData += event.key;

        // // 设置一个短暂的延迟来检查是否还有更多的输入
        // setTimeout(() => {
        //   if (this.isScanning) { // 如果没有新的输入，则认为扫描完成
        //     this.finishScanning();
        //   }
        // }, 300); // 可以根据需要调整这个时间间隔
      }
    },

    finishScanning() {
      this.isScanning = false;
      const scannedData = this.barcodeData.trim();

      if (scannedData) {
        console.log("Barcode scanned:", scannedData);

        // 将扫描到的数据存储到本地
        localStorage.setItem('caseNo', scannedData);

        // 跳转到 Frame 页面
        this.$router.push({
          name: "Frame"
        });

        // 清空数据为下一次扫描做准备
        this.barcodeData = '';
      }
    },
  },
};
  </script>
  
  <style scoped>
  /* 移除了与视频流和摄像头有关的样式 */
  .login {
    width: 100%;
    height: 100%;
    background-image: url("../assets/image/login.jpg");
    position: fixed;
    background-size: cover;
  }
  
  .box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 500px;
    height: 300px;
    margin: auto;
    border: 1px solid #ccc;
    background-color: rgba(255, 255, 255, 0.34);
  }
  
  .box h2 {
    padding: 20px 0 20px 0;
    font-size: 30px;
    font-weight: 900;
    text-align: center;
    line-height: 30px;
    color: #3333aa;
  }
  </style>